<template>
  <a-modal
    :visible="visible"
    :title="dialogTitle + '里程碑'"
    :unmount-on-close="true"
    :mask-closable="false"
    width="660px"
    @cancel="handleCancel"
    @before-ok="handleBeforeOk"
  >
    <a-form
      ref="milestoneRef"
      :model="formData"
      auto-label-width
      :disabled="handleType === 'view'"
      class="form"
    >
      <a-form-item
        field="name"
        label="里程碑名称"
        :rules="[
          {
            required: true,
            message: '里程碑名称必填',
          },
        ]"
      >
        <a-input v-model="formData.name" placeholder="请输入" />
      </a-form-item>

      <a-form-item
        field="endTime"
        label="结束时间"
        :rules="[
          {
            required: true,
            message: '结束时间必选',
          },
        ]"
      >
        <a-date-picker
          v-model="formData.endTime"
          placeholder="请选择"
          style="width: 100%"
        />
      </a-form-item>

      <a-form-item
        field="describe"
        label="交付物描述"
        :rules="[
          {
            required: true,
            message: '交付物描述必填',
          },
        ]"
      >
        <a-textarea
          v-model="formData.describe"
          placeholder="请输入"
          allow-clear
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
  import { computed, ref, watch } from 'vue';
  import { FormInstance } from '@arco-design/web-vue/es/form';
  import { Message } from '@arco-design/web-vue';
  import { MilestoneRecord, saveMilestone, updateMilestone } from '../api';

  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
    handleType: {
      type: String,
      default: 'view',
    },
    originData: {
      type: Object,
      require: true,
    },
  });
  const emit = defineEmits(['update:visible', 'refresh']);

  const formData = ref<MilestoneRecord>({
    ...props.originData,
  } as MilestoneRecord);

  watch(
    () => props.originData,
    (n) => {
      formData.value = { ...n } as MilestoneRecord;
    }
  );

  const dialogTitle = computed(() => {
    switch (props.handleType) {
      case 'add':
        return '创建';
      case 'view':
        return '查看';
      default:
        return '编辑';
    }
  });

  const milestoneRef = ref<FormInstance>();

  // 新增里程碑
  const handleAdd = async () => {
    const params = {
      ...formData.value,
    };
    const res = await saveMilestone(params);
    return !!res.status;
  };

  // 编辑里程碑
  const handleEdit = async () => {
    const params = {
      ...formData.value,
    };
    const res = await updateMilestone(params);
    return !!res.status;
  };

  // 确定按钮点击事件
  const handleBeforeOk = async (done: any) => {
    const res = await milestoneRef.value?.validate();
    if (!res) {
      let flg = false;
      let msg = '添加成功';
      if (props.handleType === 'add') {
        flg = await handleAdd();
      } else if (props.handleType === 'edit') {
        flg = await handleEdit();
        msg = '编辑成功';
      }

      if (flg) {
        Message.success(msg);
        emit('update:visible', false);
        emit('refresh');
      }
      done();
    }
  };

  // 取消按钮点击事件
  const handleCancel = () => {
    emit('update:visible', false);
  };
</script>

<style lang="less" scoped>
  form {
    :deep(.arco-row) {
      margin-bottom: 16px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
</style>
